<template>
  <u-popup :value="value" mode="bottom" :mask-close-able="false">
    <view class="action-ph" />
    <view class="action-wrap">
      <view class="action-btns">
        <view style="color: #c0c4cc" @click="cancel">取消</view>
        <view style="color: #2979ff" @click="confirm">确定</view>
      </view>
    </view>
    <view class="tree-wrap">
      <LyTree
        ref="tree"
        :tree-data="dataSource"
        :default-expandAll="true"
        :showCheckbox="multiple"
        :checkOnlyLeaf="false"
        :checkOnClickNode="true"
        :defaultCheckedKeys="defaultCheckedKeys"
        nodeKey="key"
        @check="onChange"
        @node-click="onNodeClick"
      />
    </view>
  </u-popup>
</template>
<script>
import LyTree from "@/components/ly-tree/ly-tree";
import { mapState } from 'vuex'
export default {
  name: "",
  components: {
    LyTree
  },
  props: {
    defaultValue: {
      type: String,
      default: ""
    },
    value: {
      type: Boolean,
      default: false
    },
    disabled: {
      type: Boolean,
      default: false
    },
    multiple: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      currentKey: "",
      checkList: [],
      defaultCheckedKeys: []
    };
  },
  computed: {
    ...mapState(['company']),
    dataSource() {
      return this.company.posSource
    }
  },
  watch: {
    defaultValue: {
      handler(newVal) {
        this.defaultCheckedKeys = newVal.split(",");
      },
      immediate: true
    }
  },
  created() {},
  mounted() {},
  methods: {
    cancel() {
      this.$emit("cancel");
    },
    confirm() {
      this.$emit("confirm", this.checkList);
    },
    onChange(res) {
      if (this.multiple) {
        const temp = res.checkedNodes.filter(item => !item.disabled)
        this.defaultCheckedKeys = temp.map(item => item.key);
        this.checkList = temp
      }
    },
    onNodeClick(node) {
      if (!this.multiple) {
        this.currentKey = node.key;
        this.checkList = node;
        this.confirm();
      }
    }
  }
};
</script>
<style lang="scss" scoped>
.action-ph {
  width: 100vw;
  height: 50px;
}
.action-wrap {
  width: 100vw;
  height: 50px;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 250px;
  background: #fff;
  z-index: 100;
}
.action-btns {
  padding: 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 50px;
  border-bottom: 1px solid #E1E1E1;
}
.tree-wrap {
  padding: 16px 0;
  height: 250px;
  padding-top: 0;
  width: 100vw;
}
</style>
